<template>
  <div class="evaluate-container">
    <div class="person-container">
      <LeftMenu></LeftMenu>
      <div class="evaluate-content">
        <el-card>
          <ManagementTitle>
            <template #title>业务评价</template>
          </ManagementTitle>
          <div class="pt-15">
            <label class="label">房屋坐落</label>
            <el-input v-model="searchLocation" placeholder="请输入房屋坐落" style="width: 260px;padding-right: 20px"/>
            <el-button type="primary" @click="handleSearch">查询</el-button>
          </div>
          <el-table :data="formData" border style="width: 100%; margin-top: 16px;">
            <el-table-column prop="location" label="坐落" align="center" />
            <el-table-column prop="transaction_type" label="交易类型" align="center" />
            <el-table-column prop="comment_name" label="评论人" align="center" />
            <el-table-column prop="comment_content" label="评论内容" align="center" />
            <el-table-column prop="comment_label" label="评论标签" align="center" />
            <el-table-column prop="feedback_type" label="反馈类型" align="center" />
            <el-table-column prop="rating" label="评分" align="center" />
            <el-table-column prop="rating_time" label="评分时间" align="center" />
            <el-table-column label="操作" align="center" width="100">
              <template #default>
                <el-button size="small" type="primary">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="table-pagination">
            <el-pagination
                background
                layout="total, prev, pager, next"
                :total="formData.length"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import Top from "../../components/home/components/Top.vue";
import Footer from "../../components/home/components/Footer.vue";
import { ref, computed } from "vue";
import ManagementTitle from "@/components/ManagementTitle.vue";
import {useRoute} from "vue-router";
import LeftMenu from "@/user/LeftMenu.vue";

const route = useRoute()

const searchLocation = ref("")

const formData = [
  {
    location: '新乡市红旗区华兰大道东段',
    transaction_type: '线上',
    comment_name: '星火',
    comment_content: '星火工作室',
    comment_label: "学习",
    feedback_type: "-",
    rating: '待确认',
    rating_time: '待确认',
  }
];

const currentPage = ref(1);
const pageSize = 5;

const handleSearch = () => {
  // 搜索逻辑
  console.log('搜索房屋坐落:', searchLocation.value);
  currentPage.value = 1;
}

const handlePageChange = (page: number) => {
  currentPage.value = page;
}
</script>
<style scoped>
.evaluate-container {
  display: flex;
  flex-direction: column;
}
.person-container {
  max-width: 1290px;
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0 16px;
}
.evaluate-content {
  margin-left: 10px;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}
:deep(.center-header) {
  text-align: center !important;
}
:deep(.el-card) {
  min-height: 831px;
  width: 100%;
  max-width: 100%;
}
.tab-header {
  margin-bottom: 10px;
}
.table-pagination {
  margin: 16px 0 0 0;
  display: flex;
  justify-content: flex-end;
}
:deep(.el-table th) {
  background: #F5F7FA !important;
}
@media (max-width: 900px) {
  .person-container {
    flex-direction: column;
    align-items: stretch;
    padding: 0 4px;
  }
  .evaluate-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
  }
}
</style>